<template>
  <!-- 查询业务 -->
  <el-form :inline="true" :model="SearchData">
    <el-form-item label="项目类别">
      <el-input v-model="SearchData.typeName" placeholder="请输入项目类别" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getTable(1)">查询</el-button>
      <el-button type="primary" @click="getTable(1,'重置')">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 添加业务 -->
  <el-button type="primary" @click="addStateObj">
    添加项目类别
  </el-button>
  <el-dialog v-model="addState" title="添加项目类别" width="40%" draggable>
    <el-form :inline="true" :model="addData" class="demo-form-inline">
      <el-form-item label="项目类别">
        <el-input v-model="addData.typeName" placeholder="请输入项目类别" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addState = false">取消</el-button>
        <el-button type="primary" @click="addTable">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 展示业务 -->
  <tablePage :tableTitle="tableTitle" @getTableData = 'getTable' @deleteTable = 'deleteTable' @updateTable="updateStateObj" :tableData = 'data'  ></tablePage>

<!-- 修改业务业务 -->
  <el-dialog v-model="xiugaistate" title="修改项目类别" width="40%" draggable>
    <el-form :inline="true" :model="updateData" class="demo-form-inline">
      <el-form-item label="项目类别">
        <el-input v-model="updateData.typeName" placeholder="请输入项目类别" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugaistate = false">取消</el-button>
        <el-button type="primary" @click="updateTable">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang='ts'>
import tablePage from '../components/table.vue'
import {typeDelete,typeInsert,typeSelect,typeUpdate} from '../utils/api.js'
import { reactive, ref, onMounted } from 'vue'
/* 每页显示多少条数据 */
const limit = 8
/* 添加数据的弹框状态 */
const addState = ref(false)
/* 添加弹框状态--修改函数 */
const addStateObj = () => { 
  addState.value = !addState.value
}
/* 修改数据的弹框状态 */
const xiugaistate = ref(false)
/* 修改弹框状态--修改函数 */
const updateStateObj = (row?) => { 
  if (xiugaistate.value) { 
    xiugaistate.value = false
    return
  }
  xiugaistate.value = true
  /* 该函数内部要将表格行数据绑定在修改表单的数据上 */
  updateData.id = row.id
  updateData.typeName = row.typeName
}
/* 表格的字段名及对应中文意思 */
const tableTitle = [
  {key:'id',name:'类别编号'},
  {key:'typeName',name:'类别名称'},
]
/* 表格需要的数据 */
const data = reactive({
  nowPage: 1,
  maxPage: 1,
  data: []
})
/* 查询表单数据 -- 这里修改查询字段*/
const SearchData = reactive({
  limit:limit,
  typeName: ''
})
/* 添加表单的数据 -- 这里修改添加字段*/
const addData = reactive({
  typeName: ''
})
/* 修改表单的数据 -- 这里修改更新字段*/
const updateData = reactive({
  id:'',
  typeName: ''
})
/* 分页及多条件的查询接口 -- 函数 ajax */
const getTable = (pageNum,chongzhiState?) => { 
  console.log(pageNum)
  if (chongzhiState) { 
    SearchData.typeName = "";
  }
  typeSelect({
    page: pageNum,
    ...SearchData
  }).then(resp => { 
    data.nowPage = resp.nowPage
    data.maxPage =  resp.maxPage
    data.data = resp.data
  })
  data.nowPage = pageNum
}

/* 添加业务--函数ajax */
const addTable = () => { 
  typeInsert({
    typeName:addData.typeName
  }).then(res => {
    addStateObj()
    getTable(1)
  })
}
/* 查询业务--函数ajax */
const updateTable = () => { 
  typeUpdate({
    id:updateData.id,
    typeName:updateData.typeName
  }).then(resp => { 
    updateStateObj()
    getTable(1)
  })
}
/* 删除业务--函数ajax */
const deleteTable = (row) => { 
  typeDelete({
    id:row.id
  }).then(resp => { 
    getTable(1)
  })
}
/* 页面加载完毕后执行的函数--渲染首页数据 */
onMounted(() => { 
  getTable(1)
})

</script>
<style scoped>
</style>